<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/'.system_setting('base.theme').'/css/bootstrap.css') }}">
  <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>

<script src="{{ asset('vendor/vue/2.7/vue.min.js') }}"></script>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/element-ui/index.css') }}">
<!-- 引入组件库 -->
<script src="{{ asset('vendor/element-ui/index.js') }}"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" type="text/css" href="{{ plugin_resize('consult','/ui/vant.css') }}">
<script src="{{ plugin_resize('consult','/ui/vant.js')}} "></script>
<script src="{{ plugin_resize('consult','/ui/vue-i18n.js') }}"></script>
<script src="{{ asset('vendor/axios/0.27.2/axios.min.js') }}"></script>
<script src="{{ plugin_resize('consult','/ui/emoji.js') }}"></script>
<div id="AppConsultUser">
    <div class="app-s-link-button" v-if="linkService">
        <div>
            <van-grid square :column-num="1" :border="false">
              <van-grid-item style="cursor:pointer;" v-if="info.setting.facebook" text="Facebook" @click="serviceButton('facebook')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/facebook.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.messenger" text="Messenger" @click="serviceButton('messenger')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/messenger.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.instagram" text="Instagram" @click="serviceButton('instagram')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/instagram.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.whatsapp" text="WhatsApp" @click="serviceButton('whatsapp')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/whatsapp.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.line" text="Line" @click="serviceButton('line')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/line.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.snapchat" text="Snapchat" @click="serviceButton('snapchat')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/snapchat.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.wecom" text="WeCom" @click="serviceButton('wecom')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/wecom.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.tiktok" text="Tiktok" @click="serviceButton('tiktok')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/tiktok.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.kwai" text="Kwai" @click="serviceButton('kwai')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/kwai.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.vkontakte" text="Vkontakte" @click="serviceButton('vkontakte')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/vkontakte.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item style="cursor:pointer;" v-if="info.setting.telegram" text="Telegram" @click="serviceButton('telegram')">
                  <el-avatar slot="icon" shape="square" style="margin-bottom:8px;" src="{{ plugin_resize('consult','/image/telegram.webp')}}"></el-avatar>
              </van-grid-item>
              <van-grid-item icon="service" v-if="info.setting.service" style="cursor:pointer;" @click="linkServiceOpen" :badge="news>99?'99+':news==0?'':news" :text="$t('message.service_ui.service')"></van-grid-item>
              <van-grid-item icon="arrow-up" v-if="info.setting.service || info.setting.wecom || info.setting.snapchat || info.setting.line || info.setting.whatsapp || info.setting.instagram || info.setting.messenger || info.setting.facebook || info.setting.telegram || info.setting.vkontakte || info.setting.kwai || info.setting.tiktok" style="cursor:pointer;" @click="backTop" :text="$t('message.service_ui.top')"></van-grid-item>
            </van-grid>
        </div>
    </div>
    <div v-else>
        <el-container class="app-s-container">
          <el-header class="app-s-header">
              <van-cell center :title="info.service.service_nickname" :label="info.service.service_describe">
                  <el-avatar :size="46" class="app-s-header-logo" :class="service_status.online?'':'www-filter'" slot="icon" :src="info.service.service_avatar"></el-avatar>
                  <i class="el-icon-close app-s-header-close" slot="right-icon" @click="linkServiceClose"></i>
              </van-cell>
          </el-header>
          <el-main class="app-s-main" id="AppConsultMessage">
            <div class="app-consult-loading" v-if="chatList.loading">
                <div class="app-consult-loading__spinner--dots">
                    <div class="app-consult-loading__dot"></div>
                    <div class="app-consult-loading__dot" style="animation-delay:0.26666666666666666s;"></div>
                    <div class="app-consult-loading__dot" style="animation-delay:0.5333333333333333s;"></div>
                </div>
            </div>
              <div class="www-chat-content-box">
                  <template v-for="item in chatList.menu?.contentDetail">
                      <template v-if="item.type===2">
                          <div class="www-chat-content-width">
                              <div class="www-chat-left-content">
                                  <el-avatar class="www-chat-left-avatar" :src="item.avatar"></el-avatar>
                                  <!-- 文本 -->
                                  <div class="www-chat-left-content-show" v-if="item.role===1 && !item.translate">
                                      <div class="app-consult-newline">${item.text}</div>
                                  </div>
                                  <div class="www-chat-left-content-show" v-if="item.role===1 && item.translate">
                                      ${item.translate}
                                  </div>
                                  <!-- 图片 -->
                                  <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===2">
                                      <el-image style="max-width: 240px;" :src="item.content.url" :preview-src-list="[item.content.url]"></el-image>
                                  </div>
                                  <!-- 视频 -->
                                  <div class="www-chat-left-content-show" v-if="item.role===3">
                                      <video style="max-width: 240px;" :src="item.content.url" controls></video>
                                  </div>
                                  <!-- 商品 -->
                                  <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===7">
                                      <div class="www-chat-shopping-detail">
                                          <van-card :tag="item.content.trait" @click="getProduct(item)" :currency="item.content.currency" class="www-chat-shopping-card" :price="item.content.price" :title="item.content.name" :thumb="item.content.images[0]" :origin-price="item.content.origin_price">
                                          </van-card>
                                      </div>
                                  </div>
                              <!-- 订单 -->
                                <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===9" style="padding: 0;">
                                  <div class="www-chat-shopping-detail">
                                    <van-card style="padding: 10px;" class="www-chat-shopping-card" @click="getIndent(item)" :currency="item.content.symbol_left" :num="item.content.num" :price="item.content.price" :title="item.content.name" :thumb="item.content.image">
                                    </van-card>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.order_number')" :value="item.content.number" :border="false"></van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.status')" :border="false">
                                        <el-link v-if="item.content.status=='unpaid'" type="primary" :underline="false">${$t('message.service_ui.unpaid')}</el-link>
                                        <el-link v-if="item.content.status=='paid'" type="warning" :underline="false">${$t('message.service_ui.unshipped')}</el-link>
                                        <el-link v-if="item.content.status=='shipped'" type="warning" :underline="false">${$t('message.service_ui.shipped')}</el-link>
                                        <el-link v-if="item.content.status=='completed'" type="success" :underline="false">${$t('message.service_ui.completed')}</el-link>
                                        <el-link v-if="item.content.status=='cancelled'" type="info" :underline="false">${$t('message.service_ui.canceled')}</el-link>
                                    </van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.addressee')" :value="item.content.shipping_customer_name" :border="false"></van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.phone')" :value="item.content.shipping_telephone" :border="false"></van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.shipping_address')" :value="item.content.shipping_country+item.content.shipping_zone+item.content.shipping_city+item.content.shipping_address_1+item.content.shipping_address_2" :border="false"></van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.email')" :value="item.content.email" :border="false"></van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.payment')" :value="item.content.payment_method_name" :border="false"></van-cell>
                                    <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.creation_time')" :value="item.content.created_at" :border="false"></van-cell>
                                  </div>
                                </div>
                              </div>
                          </div>
                      </template>
                      <template v-else>
                          <div class="www-chat-content-width">
                              <div class="www-chat-right-content">
                                  <!-- 文本 -->
                                  <div class="www-chat-right-content-show" v-if="item.role===1">
                                      <div class="app-consult-newline">${item.text}</div>
                                  </div>
                                  <!-- 图片 -->
                                  <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===2">
                                      <el-image style="max-width: 240px;" :src="item.content.url" :preview-src-list="[item.content.url]"></el-image>
                                  </div>
                                  <!-- 视频 -->
                                  <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===3">
                                      <video style="max-width: 240px;" :src="item.content.url" controls></video>
                                  </div>
                                  <!-- 商品 -->
                                  <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===7">
                                      <div class="www-chat-shopping-detail">
                                          <van-card :tag="item.content.trait" @click="getProduct(item)" :currency="item.content.currency" class="www-chat-shopping-card" :price="item.content.price" :title="item.content.name" :thumb="item.content.images[0]" :origin-price="item.content.origin_price">
                                          </van-card>
                                      </div>
                                  </div>
                                  <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===9" style="padding: 0;">
                                      <div class="www-chat-shopping-detail">
                                        <van-card style="padding: 10px;" class="www-chat-shopping-card" @click="getIndent(item)" :currency="item.content.symbol_left" :num="item.content.num" :price="item.content.price" :title="item.content.name" :thumb="item.content.image">
                                        </van-card>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.order_number')" :value="item.content.number" :border="false"></van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.status')" :border="false">
                                            <el-link v-if="item.content.status=='unpaid'" type="primary" :underline="false">${$t('message.service_ui.unpaid')}</el-link>
                                            <el-link v-if="item.content.status=='paid'" type="warning" :underline="false">${$t('message.service_ui.unshipped')}</el-link>
                                            <el-link v-if="item.content.status=='shipped'" type="warning" :underline="false">${$t('message.service_ui.shipped')}</el-link>
                                            <el-link v-if="item.content.status=='completed'" type="success" :underline="false">${$t('message.service_ui.completed')}</el-link>
                                            <el-link v-if="item.content.status=='cancelled'" type="info" :underline="false">${$t('message.service_ui.canceled')}</el-link>
                                        </van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.addressee')" :value="item.content.shipping_customer_name" :border="false"></van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.phone')" :value="item.content.shipping_telephone" :border="false"></van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.shipping_address')" :value="item.content.shipping_country+item.content.shipping_zone+item.content.shipping_city+item.content.shipping_address_1+item.content.shipping_address_2" :border="false"></van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.email')" :value="item.content.email" :border="false"></van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.payment')" :value="item.content.payment_method_name" :border="false"></van-cell>
                                        <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.creation_time')" :value="item.content.created_at" :border="false"></van-cell>
                                      </div>
                                    </div>
                                  <el-avatar class="www-chat-right-avatar" :src="item.avatar"></el-avatar>
                              </div>
                          </div>
                      </template>
                  </template>
                  <div class="app-s-product-push" v-if="productPushStatus && productDetail">
                      <div class="app-s-product-push-card">
                          <van-icon name="cross" size="20px" @click="productPushStatusClose" class="app-s-product-push-card-close"></van-icon>
                          <van-card :price="productDetail.price" :currency="productDetail.currency" :title="productDetail.name" :thumb="productDetail.images[0]">
                            <template #num>
                                <el-button size="mini" type="primary" @click="productPushButton(productDetail)">${$t('message.service_ui.send')}</el-button>
                            </template>
                          </van-card>
                      </div>
                    </div>
              </div>
          </el-main>
          <el-footer class="app-s-footer">
              <div class="app-s-footer-box">
                <el-dropdown trigger="click" placement="top-start">
                  <span class="el-dropdown-link">
                    <i slot="reference" style="margin-left:auto;font-size:18px;cursor: pointer;" class="bi bi-emoji-smile"></i>
                  </span>
                  <el-dropdown-menu style="width:202px;" slot="dropdown">
                      <template v-for="(item,i) in emojiIcon">
                    <el-dropdown-item style="width:50px;float:left;padding:0px;display:flex;align-items:center;justify-content:center;"><div style="font-size:24px;cursor:pointer;" @click="faceIcon(item)">${item}</div></el-dropdown-item>
                    </template>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-upload  action="/files" v-if="percentage===100" :data="{type:'advisory'}" :show-file-list="false" :headers="headers" :on-success="uploadFile" :on-progress="uploadProgress" accept=".jpg,.jpeg,.png,.gif">
                    <i style="font-size:20px;cursor: pointer;margin-left:10px;" class="bi bi-folder2"></i>
                </el-upload>
                <el-progress type="circle" v-if="percentage<100" :percentage="percentage" :width="20" color="#fd560f" :stroke-width="2"></el-progress>
                <van-field v-model="content" maxlength="200" :border="false" rows="1" autosize type="textarea" :placeholder="$t('message.service_ui.say_something')" @keydown.enter="pushMessage" @input="inputMonitor" @blur="blurMessage"></van-field>
                <el-button type="primary" class="app-s-footer-button" size="medium" @click="pushMessage">
                    <i class="el-icon-s-promotion" style="font-size:20px;" :style="{'color':online?'':'#dddddd'}"></i>
                </el-button>
              </div>
          </el-footer>
        </el-container>
    </div>
</div>
<script>
const messages = {
    zh_cn: {
      message: {
        service_ui:{say_something:'说点什么...',service:'客服',top:'顶部',send:'发送',upload:'上传',read:'已读',unread:'未读',order_number:'订单号',addressee:'收件人',shipping_address:'收货地址',phone:'电话',email:'邮箱',payment:'支付方式',creation_time:'创建时间',fail_to_upload:'上传失败',status:'状态',unpaid:'待支付',unshipped:'待发货',shipped:'待收货',completed:'已完成',canceled:'已取消'},
      }
    },
    zh_hk: {
      message: {
        service_ui:{say_something:'說點什麽...',service:'客服',top:'頂部',send:'發送',upload:'上傳',read:'已讀',unread:'未讀',order_number:'訂單號',addressee:'收件人',shipping_address:'收貨地址',phone:'電話',email:'郵箱',payment:'支付方式',creation_time:'創建時間',fail_to_upload:'上傳失敗',status:'狀態',unpaid:'待支付',unshipped:'待發貨',shipped:'待收貨',completed:'已完成',canceled:'已取消'},
      }
    },
    en: {
      message: {
        service_ui:{say_something:'Say something...',service:'Service',top:'Top',send:'Send',upload:'Upload',read:'Read',unread:'Unread',order_number:'Order number',addressee:'Addressee',shipping_address:'Shipping_address',phone:'Phone',email:'Email',payment:'Payment',creation_time:'Creation time',fail_to_upload:'Fail to upload',status:'Status',unpaid:'Unpaid',unshipped:'Unshipped',shipped:'Shipped',completed:'Completed',canceled:'Canceled'},
      }
    },
    de: {
      message: {
        service_ui: {say_something: 'Sag etwas...', service: 'Dienst', top: 'Oben', send: 'Senden', upload: 'Hochladen', read: 'Lesen', unread: 'Ungelesen', order_number: 'Bestellnummer', addressee: 'Empfänger', shipping_address: 'Lieferadresse', phone: 'Telefon', email: 'E-Mail', payment: 'Zahlung', creation_time: 'Erstellungszeit', fail_to_upload: 'Hochladen fehlgeschlagen',status: 'Status', unpaid: 'Unbezahlt', unshipped: 'Nicht versendet', shipped: 'Versendet', completed: 'Abgeschlossen', canceled: 'Storniert'},
      }
    },
    es: {
      message: {
        service_ui:{say_something:'Di algo...',service:'Servicio',top:'Arriba',send:'Enviar',upload:'Subir',read:'Leído',unread:'No leído',order_number:'Número de orden',addressee:'Destinatario',shipping_address:'Dirección de envío',phone:'Teléfono',email:'Correo electrónico',payment:'Pago',creation_time:'Tiempo de creación',fail_to_upload:'Fallo al subir',status: 'Estado', unpaid: 'Sin pagar', unshipped: 'Sin enviar', shipped: 'Enviado', completed: 'Completado', canceled: 'Cancelado'},
      }
    },
    fr: {
      message: {
        service_ui:{say_something:'Dites quelque chose...',service:'Service',top:'Haut',send:'Envoyer',upload:'Télécharger',read:'Lu',unread:'Non lu',order_number:'Numéro de commande',addressee:'Destinataire',shipping_address:'Adresse de livraison',phone:'Téléphone',email:'E-mail',payment:'Paiement',creation_time:'Date de création',fail_to_upload:'Échec du téléchargement',status: 'Statut', unpaid: 'Non payé', unshipped: 'Non expédié', shipped: 'Expédié', completed: 'Terminé', canceled: 'Annulé'},
      }
    },
    id: {
      message: {
        service_ui:{say_something:'Katakan sesuatu...',service:'Layanan',top:'Atas',send:'Kirim',upload:'Unggah',read:'Baca',unread:'Belum dibaca',order_number:'Nomor pesanan',addressee:'Penerima',shipping_address:'Alamat pengiriman',phone:'Telepon',email:'Email',payment:'Pembayaran',creation_time:'Waktu pembuatan',fail_to_upload:'Gagal mengunggah',status:'Status',unpaid:'Tidak dibayarname',unshipped:'Untuk pengiriman',shipped:'dikirim',completed:'selesai',canceled:'dibatalkan'},
      },
    },
    it: {
      message: {
        service_ui:{say_something:'Di qualcosa...',service:'Servizio',top:'In alto',send:'Invia',upload:'Carica',read:'Letto',unread:'Non letto',order_number:'Numero d ’ordine', addressee: 'Destinatario', shipping_address: 'Indirizzodispedizione', phone: 'Telefono', email: 'Email', payment: 'Pagamento', creation_time: 'Oradicreazione', fail_to_upload: 'Caricamentofallito',status: 'Stato', unpaid: 'Non pagato', unshipped: 'Non spedito', shipped: 'Spedito', completed: 'Completato', canceled: 'Annullato'},
      }
    },
    ja: {
      message: {
        service_ui:{say_something:'何か言って...',service:'サービス',top:'トップ',send:'送信',upload:'アップロード',read:'既読',unread:'未読',order_number:'注文番号',addressee:'宛先',shipping_address:'送付先住所',phone:'電話',email:'メール',payment:'支払い',creation_time:'作成時間',fail_to_upload:'アップロード失敗',status: 'ステータス', unpaid: '未払い', unshipped: '未発送', shipped: '発送済み', completed: '完了', canceled: 'キャンセル済み'},
      }
    },
    ko: {
      message: {
        service_ui:{say_something:'뭐라고 해봐...',service:'서비스',top:'위',send:'보내기',upload:'업로드',read:'읽음',unread:'미읽',order_number:'주문번호',addressee:'수신인',shipping_address:'배송지',phone:'전화',email:'이메일',payment:'결제',creation_time:'생성시간',fail_to_upload:'업로드 실패',status: '상태', unpaid: '미지불', unshipped: '미발송', shipped: '발송완료', completed: '완료', canceled: '취소'},
      }
    },
    ru: {
      message: {
        service_ui:{say_something:'Скажите что-нибудь...',service:'Сервис',top:'Вверх',send:'Отправить',upload:'Загрузить',read:'Прочитано',unread:'Непрочитано',order_number:'Номер заказа',addressee:'Адресат',shipping_address:'Адрес доставки',phone:'Телефон',email:'Электронная почта',payment:'Оплата',creation_time:'Время создания',fail_to_upload:'Не удалось загрузить',status: 'Статус', unpaid: 'Не оплачено', unshipped: 'Не отправлено', shipped: 'Отправлено', completed: 'Выполнено', canceled: 'Отменено'},
      }
    },
    pt: {
      message: {
        service_ui:{say_something:'Diga alguma coisa...',service:'Serviço',top:'Topo',send:'Enviar',upload:'Carregar',read:'Lido',unread:'Não Lido',order_number:'Número do pedido',addressee:'Destinatário',shipping_address:'Endereço de envio',phone:'Telefone',email:'Email',payment:'Pagamento',creation_time:'Tempo de criação',fail_to_upload:'Falha no upload',status:'Status',unpaid:'Não pago',unshipped:'Não enviado',shipped:'Enviado',completed:'Completo',canceled:'Cancelado'},
      }
    },
    vi: {
      message: {
        service_ui:{say_something: 'Nói điều gì đó...', service: 'Dịch vụ', top: 'Đầu', send: 'Gửi', upload: 'Tải lên', read: 'Đã đọc', unread: 'Chưa đọc', order_number: 'Số đơn hàng', addressee: 'Người nhận', shipping_address: 'Địa chỉ giao hàng', phone: 'Điện thoại', email: 'Email', payment: 'Thanh toán', creation_time: 'Thời gian tạo', fail_to_upload: 'Tải lên thất bại', status: 'Trạng thái', unpaid: 'Chưa thanh toán', unshipped: 'Chưa giao hàng', shipped: 'Đã giao hàng', completed: 'Đã hoàn thành', canceled: 'Đã hủy'},
      }
    },
    ar: {
      message: {
        service_ui:{say_something:'قل شيئًا...',service:'خدمة',top:'أعلى',send:'إرسال',upload:'تحميل',read:'مقروء',unread:'غير مقروء',order_number:'رقم الطلب',addressee:'المستلم',shipping_address:'عنوان الشحن',phone:'هاتف',email:'بريد إلكتروني',payment:'دفع',creation_time:'وقت الإنشاء',fail_to_upload:'فشل في التحميل',status:'الحالة',unpaid:'غير مدفوع',unshipped:'غير شحن',shipped:'تم الشحن',completed:'مكتمل',canceled:'ملغى'},
      }
    },
  };
const i18n = new VueI18n({
    locale: 'en', // 设置当前语言环境为英文
    messages, // 设置语言包
  });
new Vue({
    el: '#AppConsultUser',
    i18n,
    delimiters: ['${', '}'],
    data(){
        return {
            service_status:{
                online:false,
                switch:false,
            },
            info:{
                service:{
                    service_nickname:'',
                    service_avatar:'',
                    service_describe:''
                },
                setting:{
                    service:0,
                    facebook:'',
                    messenger:'',
                    instagram:'',
                    whatsapp:'',
                    line:'',
                    snapchat:'',
                    wecom:''
                }
            },
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            menuSelected:1,
            content:'',
            chatList:{
                menu:{},
                loading:false,
                page:2,
                more:true,
            },
            ws:null,
            ws_status:true,
            heartbeatId:0,
            intervalId:0,
            serviceLinkId:0,
            linkService:true,
            percentage:100,
            news:0,
            online:0,
            emoji:new EmojiConvertor(),
            emojiIcon:[
                '😃 ','😄','😉','😆','😅','🤣','😂','🙂',
                '🙃','😘','😚','😜','🤑','🤪','🤫','😒',
                '😬','😈','😪','😷','😟','😨','😰','😡',
                '💀','🙏','💪','👐','👍','✊','✌️','👌'
            ],
            cursorPosition: null, // 保存光标位置 
            productPushStatus:true,
            productDetail:'',
            productPushOpen:false,
        }
    },
    methods: {
        // 初始化客服
        linkServiceOpen(){
            this.linkService = false
            window.parent.postMessage('open', '*')
            this.content=' '
            let _this=this
            // 判断是否存在令牌缓存
            if(_this.ws_status){
                let user_id_storage=''
                if(sessionStorage.getItem('consult_user_data')){
                    user_id_storage=sessionStorage.getItem('consult_user_data')
                }
                axios.get('/advisory_dialogue?user_id='+user_id_storage).then((response) => {
                    _this.info.service=response.data.data.service
                    _this.chatList.menu=response.data.data.content
                    if(response.data.data.user_id){
                        sessionStorage.setItem('consult_user_data',response.data.data.user_id);
                    }
                    setTimeout(function(){ 
                        _this.content='';
                        _this.chatHeight();
                        // 判断是否已经连接已经连接忽略
                        _this.initWebsocket()
                        _this.initRecordPage()
                    }, 300);
                }).catch(() => {})
                if(_this.productPushOpen){
                    let parentLocation = window.parent.location;
                    let parentUrl = parentLocation.href;
                    let regex = /\/products\/(\d+)/;
                    let match = parentUrl.match(regex);
                    
                    if (match) {
                        let productId = match[1];
                        _this.initProduct(productId);
                    }
                }
            }else{
                // 已经连接点开推送已读
                _this.readMessage()
                _this.news = 0
                _this.chatHeight();
            }
        },
        linkServiceClose(){
            this.linkService = true
            window.parent.postMessage('close', '*')
            // let iframe = window.parent.document.getElementById('ConsultIframe');
            // iframe.contentWindow.postMessage('close','*');
        },
        initWebsocket(){
            let _this = this
            let domain = window.location.hostname
            let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; 
            if(_this.ws_status){
                _this.ws = new WebSocket(protocol+domain+'/consult_socket');
                _this.ws.onopen = function() {
                    _this.ws.send(JSON.stringify({role:0,text:'ping'})); //连接成功
                    _this.ws_status=false
                    _this.readMessage()
                    // 重连成功推送在线消息
                    let a={type:1,role:103,user_id:_this.chatList.menu.user_id,service_id:_this.chatList.menu.service_id}
                    _this.ws.send(JSON.stringify(a))
                }
                _this.ws.onmessage = function(es){
                    // json数据转换成js对象
                    let e = eval("("+es.data+")");
                    if(e.client_id){
                        axios.request({method:'put',url:'/advisory_dialogue',data:{client_id:e.client_id,user_id:_this.chatList.menu.user_id}}).then((res) => {
                            // 绑定成功
                            _this.serviceLine()
                            // _this.serviceLineWatch()
                            if(res.data.data.state){
                                
                            }else{
                                // 客服不在线
                                _this.addData(res.data.data.data)
                            }
                        }).catch(() => {
                            
                        })
                    }else{
                        if(e.role>0){
                            if(e.role===1){
                                _this.content = ''
                            }
                            // 客服在线
                            if(e.role===98){
                                _this.service_status.switch=false
                                if(e.status){
                                    _this.service_status.online=true
                                }else{
                                    _this.service_status.online=false
                                }
                            // 客服上线
                            }else if(e.role===100){
                                _this.service_status.online=true
                            }else if(e.role==101){
                                // 设置已读
                                _this.chatList.menu.contentDetail.forEach((element) => {
                                    if(element.read_time==''){
                                        element.read_time=_this.timeDate()
                                    }
                                });
                            }else if(e.role==102){
                                // 客服转接
                                _this.info.service=e.service_info
                                _this.chatList.menu.service_id=e.service_id
                            }else{
                                let a={type:e.type,role:e.role,guid:e.guid,user_id:e.user_id,text:e.text,translate:e.translate,read_time:e.read_time,send_time:e.send_time,nickname:e.nickname,avatar:e.avatar,content:e.content}
                                _this.addData(a)
                                // 调取已读接口推送
                                if(!_this.linkService){
                                    _this.readMessage()
                                }else{
                                    if(_this.news==''){
                                        _this.news = 1
                                    }else{
                                        _this.news = _this.news + 1
                                    }
                                }
                            }
                        }else if(e.role===0){
                            // 心跳
                        }else if(e.role===-2){
                            // 撤回消息
                            _this.chatList.menu.contentDetail.forEach((element,i) => {
                                if(element.guid==e.data.guid){
                                    _this.chatList.menu.contentDetail.splice(i, 1);
                                }
                            })
                        }else{
                            // 客服离线
                            _this.service_status.online=false
                        }
                    }
                };
                _this.online = 1
                _this.ws.onclose = function() {
                    _this.online = 0
                    _this.ws_status=true
                    clearInterval(_this.heartbeatId);
                    clearInterval(_this.serviceLinkId);
                    _this.reconnectWebsocket()
                }
                _this.initHeartbeat()
                // 断线重连成功执行移除
                if(_this.online){
                    clearInterval(_this.intervalId);
                    _this.serviceLineWatch()
                }
            }else{
                // 已连接忽略
            }
        },
        initHeartbeat(){
            let _this = this
            _this.heartbeatId = setInterval(() => {
                _this.ws.send(JSON.stringify({role:0,text:'ping'}))
            }, 20000)
        },
        // 断线重连-主动断开不触发
        reconnectWebsocket(){
            let _this=this
            _this.ws=null
            _this.intervalId = setInterval(() => {
                _this.initWebsocket()
            }, 2000)
        },
        serviceLine(){
            this.ws.send(JSON.stringify({role:98,text:'line','user_id':this.chatList.menu.user_id,'service_id':this.chatList.menu.service_id,status:1}));
        },
        serviceLineWatch(){
            let _this=this
            _this.serviceLinkId = setInterval(() => {
                if(_this.service_status.switch){
                    
                }else{
                    _this.serviceLine()
                    _this.service_status.switch=true
                }
            }, 5000)
        },
        readMessage(){
            let _this = this
            let a={type:1,role:101,user_id:_this.chatList.menu.user_id,text:''}
            _this.postContent(a)
        },
        // 上传文件
        uploadFile(file){
            let _this=this
            if (typeof file.data.url !== 'undefined') {
                let e={}
                e.url=file.data.value
                e.name=file.data.url
                _this.pushData(1,2,e)
            }else{
                _this.$message.error($t('message.service_ui.fail_to_upload'));
            }
            setTimeout(function(){
                _this.chatHeight()
            }, 200);
        },
        timeDate(){
        	let date = new Date();
        	let y = date.getFullYear()+'-'
        	let m = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1)+'-'
        	let d = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate())+' '
        	let h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours()) +':'; //获取系统时，
        	let i = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) +':'; //分
        	let s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds(); //秒
        	let time=y+m+d+h+i+s
        	return time
        },
        addData(e){
            this.chatList.menu.contentDetail.push(e)
            this.chatHeight()
        },
        pushData(type,role,data){
            let _this=this
            switch (role) {
                case 2:
                    let a={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,content:{url:data.url,name:data.name,cover:''}}
                    _this.postContent(a)
                    _this.addData(a)
                break;
                case 3:
                    let b={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,content:{url:data.url,name:data.name,cover:''}}
                    _this.postContent(b)
                    _this.addData(b)
                break;
                case 4:
                    let c={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,content:{url:data.url,name:data.name,cover:''}}
                    _this.postContent(c)
                    _this.addData(c)
                break;
                case 7:
                    let d={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,content:data}
                    _this.postContent(d)
                    _this.addData(d)
                break;
                case 9:
                    let e={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,content:data}
                    _this.postContent(e)
                    _this.addData(e)
                break;
                default:
                break;
            }
        },
        initSetting(){
            axios.get('/advisory_setting').then((response) => {
                this.info.setting=response.data.data
                setTimeout(function(){
                    let div = document.querySelector('.app-s-link-button');  
                    if(div !== null){
                        let height = div.offsetHeight;  
                        window.parent.postMessage(height+'px', '*')
                    }
                    window.addEventListener('resize',()=>{
                        let divs = document.querySelector('.app-s-link-button');  
                        if (divs !== null) {
                        let heights = divs.offsetHeight;  
                        window.parent.postMessage(heights+'px', '*')
                        }
                    },{passive:true})
                }, 200);
                // 判断登陆
                if(response.data.data.login){
                    if(sessionStorage.getItem('consult_user_data')){
                        // 存在信息把临时id写入存储并移除
                        axios.request({method:'patch',url:'/advisory_dialogue',data:{user_id:sessionStorage.getItem('consult_user_data')}}).then(() => {}).catch(function () {});
                        sessionStorage.removeItem('consult_user_data');
                    }   
                }
            }).catch(() => {})
            // sessionStorage.setItem('consult_user_data','ttt2222');
            // console.log(sessionStorage.getItem('consult_user_data'))
            // sessionStorage.getItem('consult_user_data');
            // sessionStorage.removeItem('consult_user_data');
            // sessionStorage.clear();
        },
        backTop(){
            parent.postMessage('scroll', '*');
        },
        serviceButton(e){
            switch (e) {
                case 'facebook':
                    window.open(this.info.setting.facebook, '_blank')
                break;
                case 'messenger':
                    window.open('https://m.me/'+this.info.setting.messenger, '_blank')
                break;
                case 'instagram':
                    window.open(this.info.setting.instagram, '_blank')
                break;
                case 'whatsapp':
                    window.open('https://wa.me/'+this.info.setting.whatsapp, '_blank')
                break;
                case 'line':
                    window.open(this.info.setting.line, '_blank')
                break;
                case 'snapchat':
                    window.open(this.info.setting.snapchat, '_blank')
                break;
                case 'wecom':
                    window.open(this.info.setting.wecom, '_blank')
                break;
                case 'tiktok':
                    window.open(this.info.setting.tiktok, '_blank')
                break;
                case 'kwai':
                    window.open(this.info.setting.kwai, '_blank')
                break;
                case 'vkontakte':
                    window.open(this.info.setting.vkontakte, '_blank')
                break;
                case 'telegram':
                    window.open(this.info.setting.telegram, '_blank')
                break;
                default:
                break;
            }
        },
        chatHeight(){
            setTimeout(function(){
                let element = document.getElementById('AppConsultMessage');
                if (element) {
                    element.scrollTop = element.scrollHeight - element.clientHeight;
                }
            }, 200);
        },
        pushMessage(event){
            event.preventDefault()
            if(this.content.trim().length>0){
                let a={type:1,role:1,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:this.content,status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,translate:'',content:{url:'',name:'',cover:''}}
              this.postContent(a)
                this.addData(a)
                this.content = ''
            }
        },
        postContent(e){
            // let data=JSON.stringify(e)
                axios.request({method:'post',url:'/advisory_dialogue',data:e}).then((res) => {
                // _this.$message({
                //   message: res.data.message,
                //   type: 'success'
                // });
              }).catch(() => {
                  
              })
            // 提交后端数据
        },
        uploadProgress(e,f,l){
            this.percentage=Math.floor(e.percent)
        },
        inputMonitor(e){
            this.chatHeight()
            // 发送后端预览
            let a={type:1,role:99,user_id:this.chatList.menu.user_id,service_id:this.chatList.menu.service_id,text:e}
            this.ws.send(JSON.stringify(a))
        },
        blurMessage(){
            this.cursorPosition = event.target.selectionStart; 
            let a={type:1,role:99,user_id:this.chatList.menu.user_id,service_id:this.chatList.menu.service_id,text:''}
            this.ws.send(JSON.stringify(a))
        },
        initRecordPage(e){
            let _this = this
            const drawerBody = document.querySelector('.app-s-main');  
            drawerBody.addEventListener('scroll', function() {  
                // 检查是否滚动到顶部  
                if (drawerBody.scrollTop === 0) {  
                    // 触发加载更多内容的函数  
                    if(_this.chatList.more){
                        //有更多
                        _this.chatList.loading=true
                        axios.request({method:'get',url:'/advisory_dialogue?detail='+_this.chatList.menu.user_id+'&page='+_this.chatList.page}).then((res) => {
                            _this.chatList.menu.contentDetail.unshift(...res.data.data.contentDetail)
                            if(res.data.data.contentDetail.length<30){
                                // 已经最后一页
                                _this.chatList.more=false
                            }else{
                                _this.chatList.page=_this.chatList.page+1
                            } 
                            _this.chatList.loading=false
                          }).catch((e) => {
                            _this.chatList.loading=false
                          })
                    }
                }  
            });  
        },
        randomNumber() {  
            const num = Date.now().toString() + Math.random().toString(36).substr(2, 9)
            return String(num)+String(this.chatList.menu.service_id);
        },
        faceIcon(e){
            // console.log(e)
            let _this=this
            const firstPart = _this.content.slice(0,_this.cursorPosition); // 从开始到指定长度的部分  
            const secondPart = _this.content.slice(_this.cursorPosition);   // 剩余的部分  
            
            // 将要插入的字符添加到第一部分字符串的末尾  
            const newFirstPart = firstPart + e;  
            
            // 重新拼接字符串  
            const newStr = newFirstPart + secondPart; 
            _this.content=newStr
        },
        getProduct(e){
            localStorage.setItem('push_data_jump','jump')
            window.parent.postMessage('product_'+e.content.id, '*')
        },
        getIndent(e){
            window.parent.postMessage('indent_'+e.content.number, '*')
            localStorage.setItem('push_data_jump','jump')
        },
        productPushStatusClose(){
            this.productPushStatus=false
        },
        initProduct(id){
            let _this = this
            axios.request({method:'get',url:'/advisory_product?id='+id}).then((res) => {
                _this.productDetail=res.data.data
              }).catch((e) => {
              })
        },
        productPushButton(e){
            let a={type:1,role:7,guid:this.randomNumber(),user_id:this.chatList.menu.user_id,text:this.content,status:1,read_time:'',send_time:this.timeDate(),nickname:this.chatList.menu.nickname,avatar:this.chatList.menu.avatar,translate:'',content:e}
          this.postContent(a)
            this.addData(a)
            this.productPushStatus=false
        },
    },
    mounted(){
        this.initSetting()
        this.$i18n.locale = '{{$lang}}';
        if(localStorage.getItem('push_data_jump')){
            localStorage.removeItem('push_data_jump')
            this.linkServiceOpen()
        }else{
            this.productPushOpen=true
        }
    },
})
Vue.use(vant.Lazyload);
</script>
<style>
.app-s-link-button{
    /*position: fixed;*/
    /*right: 20px;*/
    /*bottom: 80px;*/
    /*z-index: 9999;*/
    /*width: 90px;*/
    /*height: 90px;*/
    padding: 10px 0px;
    box-sizing: border-box;
}
.app-s-link-button .el-avatar>img{
    background: #fff;
}
body{
    overflow: hidden;
}
.app-s-container{
    height: 100vh;
    flex-direction: column;
}
.app-s-header{
    padding: 0px !important;
    height: 66px !important;
}
.app-s-header-logo{
    margin-right:8px;
}
.app-s-header-close{
    font-size: 20px !important;
    cursor: pointer;
    
}
.app-s-main{
    padding: 0px;
    background: #f2f2f2;
    overflow: auto;
    height: 100%;
}
.app-s-footer{
    padding: 0px 16px;
    height: auto !important;
    min-height: 60px;
}
.app-s-footer-box{
    min-height: 60px;
    display:flex;
    align-items: center;
}
.app-s-footer-button{
    padding: 7px 17px !important;
}
.el-upload--picture-card:hover,.el-upload:focus {
    border-color: #212529;
    color: #212529;
}
.el-upload--picture-card{
    width: 80px !important;
    height: 80px !important;
    line-height: 78px !important;
}
.el-upload-list--picture-card .el-upload-list__item{
    width: 80px !important;
    height: 80px !important;
}
.el-upload:focus .el-upload-dragger {
    border-color: #212529;
}
@media screen and (max-width: 720px) {
    .app-s-link-button .el-avatar{
        width: 28px;
        height: 28px;
    }
    .app-s-link-button .van-grid-item__text{
        font-size: 10px;
        white-space: nowrap;
    }
}
</style>
<style>
#AppConsultUser .van-card{
    background-color: #fff !important;
}
.www-filter{
    filter: grayscale(90%);
}
/* 对话内容部分开始 */
.www-chat-content-box{
    padding: 15px 15px 0px 15px;
    box-sizing: border-box;
    overflow: hidden;
}
.www-chat-content-width{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.www-chat-message-time-left{
    position: absolute;
    bottom: 0px;
    left: 50px;
    font-size:12px;
    color:#999;
}
.www-chat-message-time-right{
    position: absolute;
    bottom: 0px;
    right: 50px;
    color:#999;
    font-size:12px;
}
/*.www-chat-content-width:hover .www-chat-message-time-left{*/
/*    display: inline;*/
/*}*/
/*.www-chat-content-width:hover .www-chat-message-time-right{*/
/*    display: inline;*/
/*}*/
/* 聊天左边消息 */
.www-chat-left-content{
    position: relative;
    max-width: 80%;
    display: flex;
    margin-bottom: 18px;
    float: left;
}
.www-chat-left-avatar{
    margin: 0px 10px 0px 0px;
    width: 40px;
    height: 40px;
}
.www-chat-message-status{
    font-size:12px;
}
.www-chat-message-status-no{
    color:#ff0000;
}
.www-chat-other{
    margin-left: auto;
}
.www-chat-left-content-show{
    background:#ffffff !important;
    width: calc(100% - 50px);
    min-height: 40px;
    border-radius: 20px 20px 20px 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    line-height: 22px;
    font-size: 14px;
    /*box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);*/
}
/* 时间 */
.www-chat-content-time{
    text-align: center;
    margin-bottom: 15px;
    clear: both;
}
/* 聊天右边消息 */
.www-chat-right-content{
    position: relative;
    max-width: 80%;
    display: flex;
    margin-bottom: 18px;
    float: right;
}
.www-chat-right-content-show{
    background:#fd560f !important;
    color:#ffffff;
    width: calc(100% - 50px);
    min-height: 40px;
    border-radius: 20px 20px 0px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    line-height: 22px;
    font-size: 14px;
}
.www-chat-right-avatar{
    margin: 0px 0px 0px 10px;
    width: 40px;
    height: 40px;
}
.www-chat-picture-border{
    padding: 0px;
    position: relative;
    border-radius: 5px;
    background: #fff !important;
}
.www-chat-content-edit{
    height: 130px;
}
.www-chat-content-edit .spanarea__inner{
    resize:none;
    box-shadow: none;
    min-height: 130px !important;
}
.www-chat-operation{
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid var(--el-border-color-lighter);
    align-items: center;
}
.www-chat-record{
    margin-left: auto;
    margin-right: 15px;
    cursor: pointer;
    color: var(--span-color-regular) !important;
}
.www-chat-icon-default-color{
    color: var(--span-color-regular);
}
.www-chat-file{
    width: 240px;
    background: var(--van-background);
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 2px 10px 5px;
}
.www-chat-video-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 标签 */
.www-chat-badge{
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0;
    min-width: 16px;
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 100;
    padding: 0 4px;
    font-size: 12px;
    color: #ffffff;
    background-color: var(--el-color-primary);
    text-align: center;
    height: 18px;
    line-height: 18px;
    position: absolute;
    right: 0px;
    top: 8px;
}
.www-chat-badge-after{
    left: -17px;
    border-left: 18px solid transparent;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    border-bottom: 18px solid var(--el-color-primary);
}
.www-chat-badge-before{
    right: -17px;
    border-right: 18px solid transparent;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    border-bottom: 18px solid var(--el-color-primary);
}
/* 购物卡片 */
.www-chat-shopping-detail{
    width: 280px;
    /*padding: 10px 40px 10px 10px;*/
    box-sizing: border-box;
    position: relative;
    background-color: var(--van-search-content-background);
}
.www-chat-shopping-card{
    padding: 5px !important;
    margin-top: 0px !important;
}
.www-chat-shopping-card .van-card__price{
    color: #ff0000;
}
/* 对话内容部分结束 */
.app-consult-newline{
    white-space: pre-wrap;
}
.app-consult-loading{
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-consult-loading__spinner--dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: none;
    width: 40px;
    height: 40px;
    animation-duration: 0.8s;
    animation-play-state: running;
}
.app-consult-loading__spinner--dots .app-consult-loading__dot {
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background-color: #fd560f;
    animation-duration: 1.8s;
    animation-name: dotting;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: 0.8s;
    animation-delay: 0s;
    animation-play-state: running;
}
@keyframes dotting {
  0% {
    opacity: 0.15;
  }
  1% {
    opacity: 0.8;
  }
  33% {
    opacity: 0.8;
  }
  34% {
    opacity: 0.15;
  }
  100% {
    opacity: 0.15;
  }
}
.app-s-product-push{
    position: fixed;
    z-index: 1;
    max-width: calc(100% - 30px);
    width: 100%;
    bottom: 75px;
    border-radius: 5px;
    box-sizing:border-box;
    overflow: hidden;
}
.app-s-product-push-card{
    position: relative;
}
.app-s-product-push-card-close{
    position: absolute;
    top: 10px;
    z-index: 1;
    right: 15px;
    cursor: pointer;
}
.app-s-product-push-card .van-card__title{
    padding: 0px 30px 0px 0px;
}
.app-s-product-push-card .van-card__price-currency,.app-s-product-push-card .van-card__price-integer{
    color: #ff0000;
}
</style>